<template>
    <!-- 返回上一个页面 -->
    <van-nav-bar
        title="商品分类"
        left-text="返回"
        left-arrow
        @click-left="back"
        :fixed="true"
    />
    <!--侧边栏
        active 当前导航索引号
     -->
    <div class="container">
        <van-sidebar v-model="active"  @change="change" class="type">
            <van-sidebar-item v-for="item in TypeList" :title="item.name" />
        </van-sidebar>

        
        <!--
            商品卡片
            :tag="item.flag_text"获取器
            @click="Info(item.id)" 点击拿到商品id
         -->
        <div class="list">
            <!-- <van-loading v-show="Show" size="100" color="#1989fa" class="loading">
                加载中...
            </van-loading>
             -->
            <van-card
                v-for="item in ProductList"
                :tag="item.flag_text"
                :price="item.price"
                :title="item.name"
                :thumb="item.cover_cdn"
                @click="Info(item.id)"
            />
        </div>
    </div>

</template>

<script>
export default {
    name:'TypeIndex',

     created() {

            this.TypeData();
      
        },

    data() {
        return {
            // 初始化
            active:0,//索引
            typeid:0,//分类id
            TypeList:[],//分类列表
            ProductList:[],//商品列表
            Show:false,//是否显示

        }
    },

    methods: {
        back()
        {
            this.$router.go(-1)
        },

        // 侧边栏切换(发生一次改变时就要显示一次数据，所以进来就要调用接口方法)
        change(index)
        {
            // 根据索引index找类别id->找分类id
            this.typeid=this.TypeList[index].id;
            // console.log(this.typeid);
            this.TypeProduct()
            
        },

        // 跳转
        Info(proid)//就是传过来的商品id
        {
            this.$router.push({path:'/product/product/info',query:{proid:proid}})
        },
       
        // 分类
        async TypeData()
        {
           
            var result=await this.$api.TypeIndex()

            if (result.data.length > 0) {

                this.TypeList = result.data//覆盖

                // 拿分类的第一个(一进来就要有数据)
                this.typeid=this.TypeList[0].id
                // 根据类id 获取商品
                this.TypeProduct();

            }
        
        },

        // 商品： 调用接口，拿分类数据
        async TypeProduct()
        {

            // this.ProductList = []
            // 接口请求时加载
            // this.Show=true

            var data={
                typeid:this.typeid,
            }
            var result=await this.$api.TypeProduct(data);
            // console.log(result);   

            // this.Show = true//请求结束
            
            if(result.data.length>0)
            {
                // 覆盖
                this.ProductList=result.data
            }

            console.log(this.ProductList);
            
            
        }

       
    },
}
</script>
<style>
  .container{
    padding-top:3.5em;
    display: flex;
  }

/* 设置侧边栏 */
  .container .type{
    width:30%;
    height:93vh;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .container .list{
    width:100%;
    height:93vh;
    /* 多余显示滚动条 */
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .container .loading{
    text-align: center;
  }
</style>